<template>


          
    
          
           
            <div class="footer">
                <van-tabbar v-model="active" fixed router safe-area-inset-bottom>
                    <van-tabbar-item   replace :to="{name:'home',params:{id:0}}" >
                        <span>首页</span>
                        <img slot="icon" slot-scope="props" :src="props.active ? icon.fot_1_1 : icon.fot_2_1" >
                    </van-tabbar-item>
                    <van-tabbar-item replace  :to="{name:'device',params:{id:1}}">
                        <span>矿机</span>
                        <img slot="icon" slot-scope="props" :src="props.active ? icon.fot_1_2 : icon.fot_2_2"  >
                    </van-tabbar-item>
                    <van-tabbar-item replace  :to="{name:'transaction',params:{id:2}}">
                        <span>交易大厅</span>
                        <img slot="icon" slot-scope="props" :src="props.active ? icon.fot_1_3 : icon.fot_2_3" >
                    </van-tabbar-item>
                    <van-tabbar-item replace  :to="{name:'treasureHunt',params:{id:3}}">
                        <span>寻宝</span>
                        <img slot="icon" slot-scope="props" :src="props.active ? icon.fot_1_4 : icon.fot_2_4" >
                    </van-tabbar-item>
                    <van-tabbar-item replace  :to="{name:'mine',params:{id:4}}">
                        <span>我的</span>
                        <img slot="icon" slot-scope="props" :src="props.active ? icon.fot_1_5 : icon.fot_2_5" >
                    </van-tabbar-item>
                  </van-tabbar>
            </div>
            
  
   




</template>

<script>
     
export default {

data() {
    return {
                active:0,
                icon: {
                    fot_1_1: require('../../assets/img/fot_1_1.png'),
                    fot_2_1: require('../../assets/img/fot_2_1.png'),
                    fot_1_2: require('../../assets/img/fot_1_2.png'),
                    fot_2_2: require('../../assets/img/fot_2_2.png'),
                    fot_1_3: require('../../assets/img/fot_1_3.png'),
                    fot_2_3: require('../../assets/img/fot_2_3.png'),
                    fot_1_4: require('../../assets/img/fot_1_4.png'),
                    fot_2_4: require('../../assets/img/fot_2_4.png'),
                    fot_1_5: require('../../assets/img/fot_1_5.png'),
                    fot_2_5: require('../../assets/img/fot_2_5.png'),
                 },
    }
},
 props: ['footer_on'],
 methods: {
     change(index){
         console.log(index)
     }
  },
  mounted(){

      console.log(this.$route.params)
      this.active=this.footer_on;
  }
}
</script>


<style lang="scss" scoped >
    /deep/.van-tabbar{background-color: #2C025C;}
    /deep/.van-tabbar-item__icon img{height: 1.5rem;}
     </style>
